<template>
	<view>
		<!-- 开启消息提示 -->
		<u-toast ref="uToast" />
		<!-- 顶部公司名 -->
		<view class="topbox">
			<!-- 文字 -->
			<view class="rightbox">
				<view class="u-m-l-50 u-m-t-50 u-font-18 u-title">{{companyInfo.detailed_company_name}}</view>
			</view>
			<!-- 图片 MP  兼容 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序  -->
			<!-- #ifdef MP -->
			<view class="leftbox1">
				<u-image class=" u-m-l-50" width="150rpx" height="150rpx" :src="companyInfo.image" ></u-image>
			</view>
			<!-- #endif -->
			
			<!-- #ifdef H5 -->
			<view class="leftbox">
				<u-image class="u-m-t-20 u-m-l-50" width="150rpx" height="150rpx" :src="companyInfo.image" ></u-image>
			</view>
			<!-- #endif -->
			
			
		</view>
		<!-- 滑块 
		:change="changeTab" 检测滑块改变
		:is-scroll="false" 可以会滚动
		:current="currentS" 当前滑块
		-->
		<view class="u-text-center">
			<u-tabs-swiper ref="uTabs"
			:list="list" 
			:is-scroll="false" 
			:current="currentS"
			@change="changeTab"
			bar-width="100"
			></u-tabs-swiper>
		</view>
		<u-line margin="8rpx" />
		<!-- 内容 -->
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height: 1300rpx;">
			<!-- 公司 -->
			<swiper-item style="height: 100%;">
				<!-- <scroll-view scroll-y  style="height: 100%;width: 100%;"> -->
					<!-- 内容区域 -->
				     <view class="u-m-l-50 u-m-t-30"  >
						 <view class="u-font-18">基本信息</view>
						 <view class="u-m-t-20 u-tips-color">公司全称：{{companyInfo.whole_company_name}}</view>
						 <view class="u-m-t-20 u-tips-color">公司性质：{{companyInfo.company_nature}}</view>
						 <view class="u-m-t-20 u-tips-color">公司规模：{{companyInfo.company_scale}}</view>
						 <view class="u-m-t-20  u-tips-color">所属行业：{{companyInfo.company_industry}}</view>
						  <view class="u-m-t-20  u-tips-color">公司官网：{{companyInfo.company_website}}</view>
						 <view class="u-m-t-50 u-font-18">企业地址</view>
						 <view class="u-m-t-20 u-tips-color">{{companyInfo.company_address}}</view>
						 <view class="u-m-t-50 u-font-18">企业简介</view>
						 <view class="u-m-t-20 u-m-r-40 u-tips-color">
							 {{companyInfo.company_briefIntroduction}}
						 </view>
						 
					 </view>
					 <!-- 底部 -->
				     <view class="footbox">
						 <u-button type="primary" size="medium" 
						 @click="collectionCompany(companyInfo.detailed_company_name,companyInfo._id)">收藏</u-button>
					 </view>
					<!-- </scroll-view>-->
			</swiper-item>
			
			<!-- 招聘的岗位 -->
			<swiper-item class="swiper-item" >
				<scroll-view scroll-y style="height: 100%;width: 100%;  background-color: #eeeef6;" >
						<view class="page-box">
							<view class="order" v-for="n in companyInfo.jobsList" :key="n._id">
								<view class="item">
									<view class="content">
										<view class="title u-line-2">{{n.job_name}}</view>
										<view class="type">{{n.educationalRequirements}}</view>
										<view class="type ">{{companyInfo.whole_company_name}}</view>
									</view>
									<view class="right">
										<view class="price u-m-r-10 u-font-16" style="color:#b53d25">
											 {{n.job_salary}}
										</view>
										<u-button type="primary" size="mini" style="margin: 5px;"
										@click="showModalAndSelectCompany(n.c_id,job)">申请</u-button>
									</view>
								</view>
								

							</view>
						</view>
					 
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 确认框 -->
		<u-modal v-model="modelShow" :show-cancel-button="true" :content="content" @confirm="confirm" ref="uModal" :async-close="true"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//公司信息
				companyInfo:{},
				imageSrc:"",
				//该公司中可以招聘的岗位
				list: [
				{
					name: '公司',
					
				}, 
				{
					name: '岗位',
					//该公司岗位的数量
					count: 0
				}],
				//当前滑块
				currentS:0,
				//内容
				swiperCurrent:0,
				//控制筛选框收缩
				collapseTtemOpen:false,
				//模态框 确认框的显示与隐藏
				modelShow:false,
				//确认框内容
				content:'确定申请该岗位吗？',
				//接受公司名字
				companyName:'',
				//当前工作对象
				job:{},
					
			}
		},
		methods: {
			//监听滑块改变
			changeTab(index){
				// console.log(index);
				this.currentS=index
				this.swiperCurrent=index
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				// console.log(e)
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e){
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.currentS = current;
			},
			//展示公司信息
			showCompany(){
				uniCloud.callFunction({
								name: "company",
								data: {
									company_id:uni.getStorageSync('hotjob_nowCompanyId')!=''?uni.getStorageSync('hotjob_nowCompanyId'):'',
									type: "selectCompanyById"
								},
								success: (res) => {
									// console.log("error！",res);
									if(res.result.status!=200){
										// console.log("error！",res);
										return;
									}
									//成功
									//赋值
									this.companyInfo=res.result.data.data[0]
									// console.log(this.companyInfo)
									this.list[1].count=this.companyInfo.jobsList.length
									
								},
								fail: (err) => {
									console.log(err)
								}
							})
			},
			//收藏公司
			collectionCompany(companyName,companyId){
				// console.log(companyName)
				// console.log(companyId)
				uniCloud.callFunction({
								name: "collection",
								data: {
									companyName:companyName,
									companyId:companyId,
									user_id:uni.getStorageSync('storage_user')!=''?uni.getStorageSync('storage_user').data[0]._id:'',
									type: "addCompanycollection"
								},
								success: (res) => {
									// console.log("error！",res);
									if(res.result.status!=200){
										return;
									}
									//成功提示
									this.$refs.uToast.show({
											title: "收藏成功！",
											type: 'success',//提示文字
											position:"top",
											icon:false,
											duration:'1000',//时间
											})
									
								},
								fail: (err) => {
									console.log(err)
								}
							})
			},
			//显示确认框并查找公司名字
			showModalAndSelectCompany(companyId,job) {
				// console.log("》》》》》》》》》》》》》》》》",job)
				this.job=job
				uniCloud.callFunction({
								name: "company",
								data: {
									_id:companyId,
									type: "selectById"
								},
								success: (res) => {
									// console.log("error！",res);
									if(res.result.status!=200){
										return;
									}
									//成功
									//赋值
									// console.log(res.result.data)
									this.companyName=res.result.data.data[0].whole_company_name
									// console.log(this.companyName)
								},
								fail: (err) => {
									console.log(err)
								}
							})
				this.modelShow = true;
					},
			//格式化当前日期的写法
			getNowDate(){
				var nowDate = new Date();
				 var year = nowDate.getFullYear();
				 var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
				  : nowDate.getMonth() + 1;
				 var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate
				  .getDate();
				 var dateStr = year + "-" + month + "-" + day;
				 return dateStr;
			},		
			confirm() {
				// console.log("》》》》》》》》》》》》》》》》",this.job)
				// console.log(this.getNowDate())
				// console.log(this.job.job_name)
						//在申请表插入一条数据
						uniCloud.callFunction({
										name: "apply",
										data: {
											user_id:uni.getStorageSync('storage_user')!=''?uni.getStorageSync('storage_user').data[0]._id:'',
											company_id:this.job.c_id,
											job_id:this.job._id,
											state:0,
											company_name:this.companyName,
											job_name:this.job.job_name,
											time:this.getNowDate(),
											type: "addApply"
										},
										success: (res) => {
											// console.log("error！",res);
											if(res.result.status!=200){
												return;
											}
											//成功
											//赋值
											// console.log(res.result.data)
											// this.companyName=res.result.data.data[0].whole_company_name
											// console.log(this.companyName)
										},
										fail: (err) => {
											console.log(err)
										}
									})
						setTimeout(() => {
							// 3秒后自动关闭
							this.modelShow = false;
							// 如果不想关闭，而单是清除loading状态，需要通过ref手动调用方法
							// this.$refs.uModal.clearLoading();
						}, 3000)
					}
		},
		//加载时
		onLoad(){
			// console.log(uni.getStorageSync('hotjob_nowCompanyId'))
			this.showCompany()
			
		}
	}
</script>

<style lang="scss" scoped>
.topbox{
	display: flex;
	background-color: #edf0f6;
	height: 200rpx;
}
.rightbox{
	flex:2;
	width:100%;
	/* background-color: #18B566; */
}
.leftbox{
	flex: 1;
	/* background-color: #82848A; */
	text-align: center;
	line-height: 200rpx;
	// margin-top: 20rpx
	
}
//小程序
.leftbox1{
	flex: 1;
	/* background-color: #82848A; */
	text-align: center;
	line-height: 3rpx;
	// margin-top: 20rpx
	
}
.uni-scroll-view{
	height: 500rpx;
}
.footbox{
	position: fixed;
	bottom: 10rpx;
	height: 70rpx;
	right: 270rpx;
}
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.right {
			color: $u-type-warning-dark;
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
	
		.left {
			margin-right: 20rpx;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}
			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}
		.right {
			// background-color: yellow;
			width: 250px;
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
	.bottom {
		display: flex;
		margin-top: 40rpx;
		padding: 0 10rpx;
		justify-content: space-between;
		align-items: center;
		.btn {
			line-height: 52rpx;
			width: 160rpx;
			border-radius: 26rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: $u-type-info-dark;
		}
		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}
}
</style>
